Create a simple FLIP animation library using the Web Animations API to do impossible layout animations.

🔴 Patreon: https://www.patreon.com/joyofcode
 𝕏 Twitter: https://twitter.com/joyofcodedev
💬 Discord: https://discord.com/invite/k6ZpwAKwwZ
🔥 Uses:  https://www.joyofcode.xyz/uses

🔗 FLIP Animation Library: https://github.com/joysofcode/flip-animation-library
🔗 FLIP Your Animations: https://aerotwist.com/blog/flip-your-animations/
🔗 Animotion: https://animotion.pages.dev/
🔗 Easing Generator: https://linear-easing-generator.netlify.app/

🔖 Timestamps

0:00 Intro
3:47 The FLIP Animation Technique
5:30 Setup
7:08 FLIP Animation Implementation
9:04 Measuring The Elements
12:44 Request Animation Frame
15:28 Invert Animation
20:35 Using Absolute Positioning
23:16 Animating Multiple Elements
27:01 Chaining FLIP Animations
30:27 Improving The FLIP Animation Library
32:39 Outro

#joyofcode #animation #flip